<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>学习笔记</title><meta name="author" content="lzoxun"><meta name="copyright" content="lzoxun"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta property="og:type" content="website">
<meta property="og:title" content="学习笔记">
<meta property="og:url" content="http://example.com/page/5/index.html">
<meta property="og:site_name" content="学习笔记">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png">
<meta property="article:author" content="lzoxun">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/page/5/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":true,"top_n_per_article":1,"unescape":true,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '学习笔记',
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2023-07-22 15:54:12'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const now = new Date()
          const hour = now.getHours()
          const isNight = hour <= 6 || hour >= 18
          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
          else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>(()=>{
  const $loadingBox = document.getElementById('loading-box')
  const $body = document.body
  const preloader = {
    endLoading: () => {
      $body.style.overflow = ''
      $loadingBox.classList.add('loaded')
    },
    initLoading: () => {
      $body.style.overflow = 'hidden'
      $loadingBox.classList.remove('loaded')
    }
  }

  preloader.initLoading()
  window.addEventListener('load',() => { preloader.endLoading() })

  if (false) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
})()</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">108</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('/img/bg.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="学习笔记"><span class="site-name">学习笔记</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">学习笔记</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/liaozhongxun" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:869664233@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/media-webrtc/" title="webrtc">webrtc</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.693Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">mdn
getUserMedia该方法提醒用户是否允许使用音视频设备（摄像头、屏幕共享、麦克风等）如果允许则返回数据流，拒绝返回错误对象，不选择也是无法调用成功
12345678910111213// 如果需要兼容其他或老的浏览器navigator.mediaDevices = navigator.mediaDevices|| navigator.webkitGetUserMedia|| navigator.mozGetUserMedia;// constraints 指定请求媒体类型navigator.mediaDevices.getUserMedia(constraints).then((stream)=&gt;&#123;    // 成功获取视频流 直接播放    video.srcObject = stream;&#125;).catch((err)=&gt;&#123;    // PermissionDeniedError: 被用户或系统拒绝    // NotFoundError: 找不到 constraints 类型&#125;)

&#x3D;&#x3D;&#x3D ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/issues/issues-style/" title="样式问题">样式问题</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.693Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">CSS初始化normalize.cssreser.css
只在火狐生效12345@-moz-document url-prefix()&#123;    .box&#123;        color:#f00; //box只在火狐浏览器上变红    &#125;&#125;

毛玻璃效果
backdrop-filter 不支持火狐

123bakcground:rgba(255,255,255,.1);box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);backdrop-filter:blur(20px);
溢出省略12345678910//单行overflow: hidden;text-overflow:ellipsis;white-space: nowrap;//多行display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;o ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/issues/issues-vue/" title="vue">vue</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.693Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">mixin混入
mixin:里面的属性方法是独立的多组件调用不相互影响vuex:里面的数据是共用的，而mixin数据在各个组件中是私有的组件:父组件与子组件是相对独立的，而mixin是在父组件对象中添加新的数据，直接合成新的组件优先级:如果名称相同，组件中的方法覆盖mixin中的方法，mixiny优先级别低

全局混入12345678910111213141516171819//mixin/mixin.jsimport Vue from &#x27;vue&#x27;Vue.mixin(&#123;    data()&#123;        return&#123;        &#125;    &#125;,    methods:&#123;        //全局关闭dialogChannel组件弹窗        dialogChannelsClose(name)&#123;            this.$set(this,name,false);        &#125;,    &#125;,&#125;)//main.jsimport @/mixin/mix ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/issues/issues-web/" title="web">web</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.693Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">微前端DX 与 UX
开发人员体验:DX（developer experience）用户体验:UX（user experience）（DX）是指开发人员在完成交付目标的整个过程的总体交互和感受（UX）的定义是用户如何使用产品、系统和服务，重点是对功能，效率，易用性等方面的感知。

</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/issues/issues-javacript/" title="javascript">javascript</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.693Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">早期 js 存在的一些问题

var 定义变量没有作用域
不能像常规语言一样使用 class，js 原型链方式是基于很早以前的Self语言的
没有模块化
无类型检测
typeof null 为什么是 object


JS 概念性问题数据类型基础知识


弱类型或者说动态语言（一个变量可以保存不同的数据类型）
原始类型 Boolean、Null、Undefined、Number、String、Bigint（ecma 2020）、Symbols（ecma 2015）
一组属性的集合 对象 Object （Object、Array、Function、Date、）


1、数据类型判断 - typeof

返回一个字符串，代表检测数据的类型

1234567891011121314151617181920212223// 正常情况返回数据类型小写单词，一下特殊情况typeof Infinity === &quot;number&quot;;typeof NaN === &quot;number&quot;;typeof Number(1) === &quot;number&quot;;typ ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/issues/issues-html/" title="html">html</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.692Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">HTMLcontenteditable 标签可编辑1&lt;div contenteditable=&quot;true&quot;&gt;&lt;/div&gt;
图片懒加载以及方案
延迟到图片出现再加载图片

123456&lt;!--通过图片的loading属性，默认eager，lazy设置成延迟加载loading=&quot;lazy&quot;loading=&quot;eager&quot;--&gt;&lt;img src=&quot;xxx&quot; loading=&quot;lazy&quot; /&gt;

datalist input输入预提示12345&lt;input list=&quot;datalistId&quot; name=&quot;xxx&quot; id=&quot;xxx&quot; /&gt;&lt;datalist id=&quot;database&quot;&gt;    &lt;option value=&quot;Javascript&quot;&gt;    &lt;option value=&quot;Typescript ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/RegExp/index/" title="正则表达式">正则表达式</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.692Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">作用1234-   数据隐藏(`180****9356`)-   数据采集(爬虫)-   数据过滤(`你是****`)-   数据验证(手机好，网址...)
JS 正则方法12345678910111213141516171819202122232425262728293031323334353637383940-   创建正则    -   `var reg = /^xxx/ig`：字面量方式    -   `var reg = new RegExp(&quot;^xxx&quot;,&quot;ig&quot;)` 或 `new RegExp(/xyz/i)`：构造行数创建    -   第一中正则在编译时就创建，实例的正则在运行是才创建-   匹配模式(修饰符)    -   表示正则的附加规则，放在最后面    -   `i:ignore` 忽略大小写    -   `g:global` 全局匹配，匹配字符串中所有匹配的词    -   `m:多行修饰符`        -   `/^(abcd|2345)$/m.test(&quot;abcd\n2345&quot;)` 匹配 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/JavaScript/%E5%9E%83%E5%9C%BE%E6%A1%B6/web-library-mockjs/" title="Mockjs">Mockjs</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.692Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">
模拟接口数据前后端分离开发Mock官网

1npm install mockjs -D //项目中安装

vue中使用定义1234567891011121314151617181920212223242526272829303132333435363738394041424344454647//mock/index.jsimport Mock from &quot;mockjs&quot;/*    Mock.mock(url?,type?,template|function(option))    参数一:可选，表示要拦截的URL地址(发送一个请求,如果请求地址Mock过了,直接拦截不回去服务器请求了)    参数二:可选，请求类型    参数三:回调*/ //Mock构造数据var Random = Mock.Random //占位符生成随机数//@符号只能在Mock.mock中使用//Random的自定义随机数Random.extend(&#123;    selfrandom:function(data)&#123;        let selfrandoms = [&#x ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/JavaScript/%E5%9E%83%E5%9C%BE%E6%A1%B6/web-safety/" title="web安全">web安全</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.692Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">漏洞排名
session、cookie 和 XSS跨站脚本攻击
HTTP
请求式应答 (有请求才有返回)
灵活可扩展 (可传输各种类型数据,请求头 响应头可自定义，只要相互认识)
可靠传输
无状态
弊端

发送请求服务器默认是不知道谁在访问的
每次访问都是独立的，无法保持会话


解决方案cookie

http扩展功能
Set-Cookie:第一次访问服务器主动响应给客户端，种cookie
Cookie:之后请求，客户端自动携带Cookie去访问服务
方式:访问域名 -&gt; 携带cookie到客户端 -&gt; 客户端存储cookie -&gt; 在访问时通过请求头携带到服务器 
再次访问服务器就知道谁在访问自己了


格式:
键值对(必须)
expires:设置过期时间
max-age:多久过期(秒，优先级高于expires)
domain:对哪个域名生效
path:匹配的路径(如果是path=/代表域名所有子域名及下所有路径都能使用)
secure: 是否只允许HTTPS,才发送Cookie到服务器
httponly:不允许通过document.cookie去修改此cooki ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2023/07/22/web/JavaScript/%E5%9E%83%E5%9C%BE%E6%A1%B6/h5-model-webRTC/" title="webRTC 直播功能">webRTC 直播功能</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2023-07-22T07:14:09.690Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="content">参考资料
webRTC 链接
呼叫者通过navigator.mediaDevices.getUserMedia()  捕获本地媒体
呼叫者创建一个RTCPeerConnection 并调用 RTCPeerConnection.addTrack() (注： addStream 已经过时。)
呼叫者调用 (“RTCPeerConnection.createOffer()”)来创建一个提议(offer).
呼叫者调用 (“RTCPeerConnection.setLocalDescription()”) 将提议(Offer)   设置为本地描述 (即，连接的本地描述).
setLocalDescription()之后, 呼叫者请求 STUN 服务创建ice候选(ice candidates)
呼叫者通过信令服务器将提议(offer)传递至 本次呼叫的预期的接受者.
接受者收到了提议(offer) 并调用 (“RTCPeerConnection.setRemoteDescription()”) 将其记录为远程描述 (也就是连接的另一端的描述).
接受者做一些可能需要的步骤结束本次呼叫：捕获本地 ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/4/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/#content-inner">4</a><span class="page-number current">5</span><a class="page-number" href="/page/6/#content-inner">6</a><span class="space">&hellip;</span><a class="page-number" href="/page/11/#content-inner">11</a><a class="extend next" rel="next" href="/page/6/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">lzoxun</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">108</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/liaozhongxun"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/liaozhongxun" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:869664233@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">这是我的文档</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-11/" title="win 11 set">win 11 set</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-gitbash/" title="git bash">git bash</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-wsl/" title="wsl">wsl</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-main/" title="window">window</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/web/%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98/" title="兼容问题">兼容问题</a><time datetime="2023-07-22T07:14:09.699Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div></div></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80/" style="font-size: 1.1em; color: #999">标记语言</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/07/"><span class="card-archive-list-date">七月 2023</span><span class="card-archive-list-count">106</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2016/12/"><span class="card-archive-list-date">十二月 2016</span><span class="card-archive-list-count">2</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">108</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2023-07-22T07:54:12.682Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By lzoxun</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><div class="js-pjax"><script>window.typedJSFn = {
  init: (str) => {
    window.typed = new Typed('#subtitle', Object.assign({
      strings: str,
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50,
    }, null))
  },
  run: (subtitleType) => {
    if (true) {
      if (typeof Typed === 'function') {
        subtitleType()
      } else {
        getScript('https://cdn.jsdelivr.net/npm/typed.js/dist/typed.umd.min.js').then(subtitleType)
      }
    } else {
      subtitleType()
    }
  }
}
</script><script>function subtitleType () {
  fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      if (true) {
        const from = '出自 ' + data.from
        const sub = []
        sub.unshift(data.hitokoto, from)
        typedJSFn.init(sub)
      } else {
        document.getElementById('subtitle').textContent = data.hitokoto
      }
    })
}
typedJSFn.run(subtitleType)
</script></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/haruto.model.json"},"display":{"position":"right","width":100,"height":200,"right":300},"mobile":{"show":true}});</script></body></html>